/**
 * @功能描述: 基础标记组件样式文件
 * @author: lzn
 * @date: 2022-09-22 14:26:58
 * @version: 1.0
 */
@import '../../style/index';

// 包裹标签时 标记定位
@mixin base-badge--absolute {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%,-50%);
  transform-origin: 100% 0%;
}

// 单独使用时的定位
@mixin base-badge--relative {
  position: relative;
}

// 标记样式
@include b(base-badge) {
  z-index: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  color: $color-white;
  font-size: $badge-font-size;
  white-space: nowrap;
  text-align: center;
  background: $badge-background-color;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #fff;
  @include base-badge--absolute;
  &.badge-alone {
    @include base-badge--relative;
  }
}

// icon标记样式
@include b(base-badge-icon) {
  font-size: $badge-font-size;
  color: $badge-background-color;
  @include base-badge--absolute;
  &.badge-alone {
    @include base-badge--relative;
  }
}

// 基础标记组件容器样式
@include b(base-badge-layout) {
  position: relative;
  display: inline-block;
  line-height: $badge-line-height;
}